<template>
	<div class="header-container" v-if="!hide">
		<div class="header-fix">
			<div class="middle">
                <div v-for="(name,index) in titleNameArr" 
                     :key="index" 
                     @click="switchRoute(index)"
                     :class="{'active':nameType == index}">{{name}}</div>
            </div>
		</div>
	</div>
</template>

<script>
import leftReturn from 'assets/left-gray.svg'
export default {
  name:'header_vfhz_carFri',
  data(){
      return {
          titleNameArr:['社区动态','热门讨论','公益活动'],
          hide:false,
          nameType: 1
      }
  },
  props:{
      leftReturn: {
		type: String,
		required: false,
		default() {
			return leftReturn
            }
        }
  },
  created () {
    let _hash = location.hash.split('#/')[1]
    switch (_hash){
        case 'carFri_home_vfhz': 
            this.nameType = 0
            break
        case 'hot_discussion': 
            this.nameType = 1
            break
        case 'city_active': 
            this.nameType = 2
            break
    }
  },
  methods:{
      switchRoute(index){
          if(index == this.nameType){
              // 当前页面
              return
          }
          let _routeName = ''
          switch (index){
              case 0:
                _routeName = 'carFri_home_vfhz'
                break
              case 1:
                _routeName = 'hot_discussion'
                break
              case 2:
                _routeName = 'city_active'
                break
          }
          this.$router.replace({
              name: _routeName
          })
      }
  }
}
</script>
<style scoped>
	.header-container{
		width:100%;
		height:50px;
        background-color: #f2f2f2;
	}
	.header-fix {
		position: fixed;
		width: 100%;
		height: 50px;
		display: flex;
		background-color: #f7f7f7;
		z-index: 100;
	}
	
	.middle {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	
	.middle {
		width: 100%;
		font-size:14px;
	}
    .middle div{
        padding: 10px 5% ;
        border-bottom: 2px solid #f7f7f7;
    }
	.middle .active{
        color: #f98700;
        border-bottom: 2px solid #F98700

    }
</style>
